<template>
 <div class="boos">
    <div class="top">
        <p class="p1">您好，</p>
        <p>欢迎注册华硕商城</p>
    </div>

    <div class="center">
       <div class="box">
            <div class="left">
                <van-icon name="friends-o"  class="icon1"/>
                <input type="text" placeholder="输入手机号" v-model="urname" @blur="fun1">
            </div>
            <div class="left">
                <van-icon name="shield-o"  class="icon1" />
                <input type="password" placeholder="请输入密码" v-model="password" :disabled="off">
            </div>
            <div class="left">
                <van-icon name="shield-o"  class="icon1" />
                <input type="password" placeholder="请再次输入密码" v-model="password2" :disabled="off">
            </div>
            <div class="left">
                <div class="sss" @click="fun()">发送验证码</div>
                <input type="text" placeholder="请输入验证码" v-model="yzm" @blur="fun2()">
            </div>
            <button class="button1" @click="fun3">立即注册</button>
       </div>
    </div>

  </div>
</template>

<script>
export default {
    data() {
        return {
            urname: "",
            password: "",
            password2: "",
            yzm: "",
            tel: "",
            text: "",
            off:1
            
        }
    },
    methods: {
        //发送验证码
        fun() {
            if (this.tel != "") {
                    this.$http({
                    url: "http://121.89.205.189:3000/api/user/dosendmsgcode",
                    method: "post",
                    data: {
                    "tel":this.tel
                    }
                }).then(res => {
                    console.log(res.data.data);
                })
            }else {
                alert("手机号错误")
            }
            
        },
        //获取用户手机号才能发送验证码
        fun1() {
            let reg = /^[1][3-9][0-9]{9}$/
            if (reg.test(this.urname) == true) {
                this.tel=this.urname
            } else {
                alert("用户手机号错误")
            }
        },
        //判断验证码是否正确
        fun2() {
            this.$http({
                url: "http://121.89.205.189:3000/api/user/docheckcode",
                method: "post",
                data: {
                    tel:this.tel,
                    telcode:this.yzm
                }
            }).then(res => {
                console.log(res.data.message);
                this.yzm=res.data.message,
                    this.text = res.data.message
                this.off=false
            })
        },
        //点击注册时判断两次的密码是否一样
        fun3() {
            if (this.password == this.password2) {
                this.$http({
                    url: "http://localhost:3000/denglu",
                    method: "post",
                    data: {
                        urname: this.urname,
                        password:this.password
                    }
                }).then(res => {
                    console.log("ok");
                    this.$emit("zhuce",0)
                })
            } else {
                alert("两次密码不相等")
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .boos{
    position: relative;
    .center{
        width: 100vw;
        height: 137vw;
        background-color: white;
        position: absolute;
        top: 40vw;
        border-radius: 10vw 10vw  0 0;
        .box{
            width: 80vw;
            height: 100vw;
            margin: auto;
            margin-top: 12vw;
            .poe{
                position: absolute;
                bottom: 45vw;
                left: 40vw;
                color: rgb(1, 243, 203);
            }
            .button2{
                width: 20vw;
                height: 8vw;
                font-size: 3vw;
                color: white;
                background-color: #1e7dff;
                margin-top: 3vw;
                float: right;
                margin-right: 4vw;
                border-style: none;
                border-radius: 2vw;
            }
            .button1{
                width: 80vw;
                height: 12vw;
                margin-top: 8vw;
                color: white;
                background-color: #1e7dff;
                border-style: none;
                border-radius: 3vw;
            }
            .left{
                width: 80vw;
                background-color: beige;
                display: flex;
                align-items: center;
                justify-content: space-around;
                background-color: #f2f3f7;
                margin-top: 5vw;
                border-radius: 2vw;
                .sss{
                    width: 15vw;
                    height: 12vw;
                background-color: #1e7dff;
                    color: white;
                    font-size: 4vw;
                    text-align: center;
                    border-radius: 2vw;
                }
                .icon1{
                    font-size: 8vw;
                }
                input{
                    width: 60vw;
                    height: 12vw;
                    background-color: #f2f3f7;
                    border-style: none;
                }
            }
        }
    }
    .top{
        width: 100vw;
        height:70vw;
        background: url("https://static.asus.com.cn/static/wap/images/bg.png");
        overflow: hidden;
        p{
            text-indent: 10vw;
            color: white;
            font-size: 8vw;
        }
        .p1{
            margin-top: 14vw;
        }
    }
}

</style>